// HomeCategory.vue
<script setup>

import {useCategoryStore} from '@/stores/category'
const categoryStore = useCategoryStore()

</script>

<template>
  <div class="home-category">
    <ul class="menu">
      <li v-for="category in categoryStore.categories" :key="category.id">
        <RouterLink v-for="childCategory in category.children" :key="childCategory.id" to="/">
          {{childCategory.name}}
        </RouterLink>
      </li>
    </ul>
  </div>
</template>


<style scoped lang='scss'>
.home-category {
  width: 300px;
  height: 500px;
  background: rgba(0, 0, 0, 0.8);
  position: relative;
  z-index: 99;

  .menu {
    li {
      padding-left: 40px;
      height: 55px;
      line-height: 55px;

      &:hover {
        background: $xtxColor;
      }

      a {
        margin-right: 4px;
        color: #fff;
      }
      
    }
  }
}
</style>